import React, { memo, Suspense } from 'react'
import type { ReactNode } from 'react'
import { Outlet } from 'react-router-dom'
import NavBar from './c-cpns/nav-bar'
interface IProps {
  children?: ReactNode
}
const Discover: React.FC<IProps> = () => {
  return (
    <div>
      <div>
        <NavBar></NavBar>
      </div>
      <Suspense fallback="">
        {/* //这里使用outlet就可以进行占用，但是为什么会在这里选择suspense操作，因为这里在使用懒加载的时候上一层的异步组件会有切换的现象，屏幕闪烁，在这里使用的话每次使用懒加载的时候会下载的js文件就不会有替换上一层的suspense的现象 */}
        <Outlet />
      </Suspense>
    </div>
  )
}
export default memo(Discover)
